let gameInfo = {
    roomId: null,
    thisUserId: null,
    thatUserId: null,
    isWhite: true,
}

//////////////////////////////////////////////////
// 设定界面显示相关操作
//////////////////////////////////////////////////

function setScreenText(me) {
    let screen = document.querySelector('#screen');
  
    if (me) {
        screen.innerHTML = "轮到你落子了!";
    } else {
        screen.innerHTML = "轮到对方落子了!";
    }
}

//////////////////////////////////////////////////
// 初始化 websocket
//////////////////////////////////////////////////
// TODO
//let websocketUrl = 'ws://' + location.host + '/findMatch';
let websocketUrl = 'ws://' + location.host + '/game';
let websocket = new WebSocket(websocketUrl);
    
    websocket.onopen = function() {
        console.log("连接游戏房间成功!");
    }
    websocket.close = function() {
        console.log(" 和游戏服务器断开连接!");
    }
    websocket.onerror = function() {
        console.log("和服务器的连接出现异常!");
    }

    window.onbeforeunload = function() {
        websocket.close();
    }

    websocket.onmessage = function(event) {
            console.log("[handelerGameReady]" + event.data);
//            let resp = JSON.parse(event.data);
//            console.log(resp.ok);
//            if(resp.ok != null && !resp.ok) {
//                alert("连接游戏失败! reason: "+resp.message);
//                location.assign("/game_hall.html");
//                return;
//            }
    let resp = JSON.parse(event.data);

    if (!resp.ok) {
        alert("连接游戏失败! reason: " + resp.reason);
        // 如果出现连接失败的情况, 回到游戏大厅
        //location.assign("/game_hall.html");
        location.replace("/game_hall.html");
        return;
    }
           
            if(resp.message == 'gameReady') {
                gameInfo.roomId = resp.roomId;
                gameInfo.thisUserId = resp.thisUserId;
                gameInfo.thatUserId = resp.thatUserId;
                gameInfo.isWhite = (resp.whiteUser == resp.thisUserId) ;
                //初始化棋盘
                initGame();
                setScreenText(gameInfo.isWhite);
            }else if(resp.message == 'repeatConnection'){
                alert("当前禁止多开请使用其他账号登录!")
                location.assign("/login.html");
            }

    }

//////////////////////////////////////////////////
// 初始化一局游戏
//////////////////////////////////////////////////
function initGame() {
    // 是我下还是对方下. 根据服务器分配的先后手情况决定
    let me = gameInfo.isWhite;
    // 游戏是否结束
    let over = false;
    let chessBoard = [];
    //初始化chessBord数组(表示棋盘的数组)
    for (let i = 0; i < 15; i++) {
        chessBoard[i] = [];
        for (let j = 0; j < 15; j++) {
            chessBoard[i][j] = 0;
        }
    }
    let chess = document.querySelector('#chess');
    let context = chess.getContext('2d');
    context.strokeStyle = "#BFBFBF";
    // 背景图片
    let logo = new Image();
    logo.src = "image/OIP-C.jpg";
    logo.onload = function () {
        context.drawImage(logo, 0, 0, 450, 450);
        initChessBoard();
    }

    // 绘制棋盘网格
    function initChessBoard() {
        for (let i = 0; i < 15; i++) {
            context.moveTo(15 + i * 30, 15);
            context.lineTo(15 + i * 30, 430);
            context.stroke();
            context.moveTo(15, 15 + i * 30);
            context.lineTo(435, 15 + i * 30);
            context.stroke();
        }
    }
    console.log("hui zhi qipan done");

    // 绘制一个棋子, me 为 true
    function oneStep(i, j, isWhite) {
        context.beginPath();
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
        context.closePath();
        var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
        if (!isWhite) {
            gradient.addColorStop(0, "#0A0A0A");
            gradient.addColorStop(1, "#636766");
        } else {
            gradient.addColorStop(0, "#D1D1D1");
            gradient.addColorStop(1, "#F9F9F9");
        }
        context.fillStyle = gradient;
        context.fill();
    }

    chess.onclick = function (e) {
        if (over) {
        console.log(1);
            return;
        }
        if (!me) {
             console.log(2);
            return;
        }
        let x = e.offsetX;
        let y = e.offsetY;
        // 注意, 横坐标是列, 纵坐标是行
        let col = Math.floor(x / 30);
        let row = Math.floor(y / 30);
        console.log("col:"+col+"row:"+row);
        console.log(chessBoard[row][col]);
        if (chessBoard[row][col] == 0) {
            // TODO 发送坐标给服务器, 服务器要返回结果
            console.log("jin lai send le");
            send(row, col);
            
//           oneStep(col, row, gameInfo.isWhite);
//           chessBoard[row][col] = 1;
        }
    }

        function send(row, col) {
            let req = {
                message: 'putChess',
                userId: gameInfo.thisUserId,
                row: row,
                col: col
            };
            console.log("fa song qing qiu: "+ req);
            websocket.send(JSON.stringify(req));
        }

        websocket.onmessage = function(event) {
            console.log("[handlerPutChess]" + event.data);

            let resp = JSON.parse(event.data);
            if(resp.message != 'putChess') {
                console.log("响应类型错误!");
                return;
            }

            if(resp.userId == gameInfo.thisUserId) {
                oneStep(resp.col, resp.row, gameInfo.isWhite);
            } else if (resp.userId == gameInfo.thatUserId) {
                oneStep(resp.col, resp.row, !gameInfo.isWhite);
            }else {
                console.log('[handlerPutChess] resp userId 错误!');
                return;
            }

            chessBoard[resp.row][resp.col] = 1;
            me = !me;
            setScreenText(me);


            let screenDiv = document.querySelector('#screen');

            if(resp.winner != 0) {
                if(resp.winner == gameInfo.thisUserId) {
                    screenDiv.innerHTML = '你赢了!';
                }else if(resp.winner == gameInfo.thatUserId) {
                    screenDiv.innerHTML = '你输了!';
                }else {
                    alert("winner 字段错误!" + resp.winner);
                }
                //location.assign('/game_hall.html');
                let backBtn = document.createElement('button');
                backBtn.innerHTML = '回到大厅';
                backBtn.onclick = function() {
                    location.replace('/game_hall.html');
                }
                let fatherDiv = document.querySelector('.container>div');
                fatherDiv.appendChild(backBtn);
            

            }
        }
}


